<template>
	<view>
		<view class="top_bar" >
			<view @click="backLogin" class="top_bar_left">
				<image src="../../static/fh.png" mode=""></image>
			</view>
			<view class="top_bar_center">
				<!-- <text>详情</text> -->
			</view>
			<view class="top_bar_right">
				<image src="../../static/three.png" mode=""></image>
			</view>
		</view>
		 <view class="fb_main">
		    <view class="fb_title">
		        添加朋友圈
		    </view>
		  <!--  <view class="fb_tips">
		        <text >视频出不来</text>
		        <text >程序问题</text>
		        <text >违规行为</text>
		         <text >使用体验</text>
		        <text >其他</text>
		    </view> -->
		    <view class="fb_content">
		    <!-- value='{{ value }}'  是单向绑定的 即value 不会随着输入而改变-->
		        <textarea :value='textVal' @input='handleTextVla' placeholder="请描述一下你的问题"> 
		            
		        </textarea>
		        <view class="fb_tool"> 
		            <button @click='HandleChooseImg'>
		                +
		            </button>
		            <!-- 当数组是简单的 用 wx:key="*this" -->
		            <view class="up_img_item"
		            v-for='item,index in chooseImages'
		            :key='index'
		            @click='handleRemoveImg'
		            :data-indexs='index'
		            >
		                <upImg :src="item"></upImg>
		            </view>
		        </view>
		    </view>
		    <view class="form_btn_wrap">
		            <button @click='handleFormSubmit' type='warn'>
		             <!-- <icon  type="success_no_circle" size="23" color="white"></icon> -->
		                提交
		            </button>
		              
		        </view>
		 </view>
	</view>
</template>

<script>
	import upImg from '../../components/upImg.vue'
	import request from '../../utails/request.js'
	
	var t = Date.now();
	export default {
		data() {
			return {
				userinfo:{},
			 // 被选中的图片路径数组
				chooseImages : [],
			
				// 文本内容
				textVal: ''
				    
			}
		},
		components:{
			upImg
		},
		onLoad() {
			this.userinfo = uni.getStorageSync('userinfo')
		},
		
	   // 外网的图片的路径数组
	   UpLoadImgs: [],
		
		methods: {
			  // 添加图片
			  HandleChooseImg(){
			    // 获取图片
			    uni.chooseImage({
			      // complete: (res) => {},
			      // 图片数量
			      count: 0,
			      // 图片格式  原图  压缩
			      sizeType: ['original','compressed'],
			      // 图片来源   拍照  相册
			      sourceType: ['camera','album'],
			      success: (result) => {
			        // console.log(result);
			        
			          // chooseImages:result.tempFilePaths
			          this.chooseImages = [...this.chooseImages,...result.tempFilePaths]
			      },
			      fail: (res) => {},
			    })
			  },
			
			  // 删除图片
			  handleRemoveImg(e){
			    // 获取要删除图片的index 
			    //  删除 修改  替换 一般用 wx:for-index
			    let {indexs} = e.currentTarget.dataset
			    // console.log(indexs);
			    // 删除
			    let chooseImages = this.chooseImages
			    chooseImages.splice(indexs,2) 
			    // 
			    this.chooseImages = chooseImages
			  },
			
			  // 监听文本输入
			  handleTextVla(e){
			    // console.log(e.detail.value);
			    this.textVal=e.detail.value
			  },
			
			  // 表单提交
			  async handleFormSubmit(){
			    // 获取数据
			    let textVal = this.textVal
				let chooseImages = this.chooseImages
			    // 校验合法性
			    if(!textVal.trim()){
			      uni.showToast({
			      	title:'提交失败',
					icon:'none'
			      })
			      return
			    }
			    // 合法
			    // 提交
			
			    uni.showLoading({
			      title: '正在上传中',
			      mask:true
			    })
				let data = {
					userid:this.userinfo.id,
					data:this.textVal
				}
				let resp = await request.request({url:'/moment_view/',data,method:'POST'})
				
			    // 判断是否包含图片
			    if((chooseImages.length != 0)&&(resp.code=='200')){
					
			      chooseImages.forEach((v,i)=>{
					this.sleep(1000) // 延迟1秒
			        uni.uploadFile({
			          // 上传文件
			          filePath: v,
			          name: 'img',
			          url: 'http://127.0.0.1:8000/pushimage/',
			          // 附带文本信息
			          formData: {
						  data: this.textVal,
						  moment:resp.data,
						  },
			          success: (res)=>{
			            // console.log(res);
			            // 返回一个json字符串 解析成json字典
			            // let url = JSON.parse(res.data).url
			            // 
			            // this.UpLoadImgs.push(url)
			            if(i === chooseImages.length - 1){
			              uni.hideLoading()
			            }
			          },
			          fail:(err)=>{
			            console.log(err);
			          }
			        })
			      })
			    }else{
			      // console.log('文本');
			      uni.hideLoading()
			    }
			
			    // 提示
			    uni.showToast({
			    	title:'提交成功'
			    })
				
				// 提醒朋友们
				// this.socket.emit('moment', )
				
				
			    // 清空内容
			    this.chooseImages= [],
			    this.textVal = ''
			    
			    // 返回上一页
			    setTimeout(()=>{
			      uni.navigateBack({
			        delta : 1
			      })
			    },1500)
			    
			  },
			  // 返回上一页
			  backLogin(){
			  	uni.navigateBack({
			  		delta:1
			  	})
			  },
			  
			  
			  // 实现延迟
			 async sleep(d){
			  	while(Date.now - t <= d);
			  } 

		}
	}
</script>

<style>
	@import '../../commons/css/myss.scss';
	
	page {
	  background-color:  #eeeeee;
	}
	.fb_main {
	  margin-top: 200rpx;
	  padding: 0 15rpx;
	  background-color:  #eeeeee;
	}
	.fb_main .fb_tips {
	  display: flex;
	  flex-wrap: wrap;
	}
	.fb_main .fb_tips text {
	  width: 30%;
	  padding: 10rpx;
	  text-align: center;
	  background-color: #fff;
	  margin: 20rpx 10rpx;
	}
	.fb_main .fb_content {
	  background-color: #ffffff;
	  margin: 20rpx 0 ;
	}
	.fb_main .fb_content textarea {
	  padding: 10rpx;
	}
	.fb_main .fb_content .fb_tool {
	  display: flex;
	  flex-wrap: wrap;
	}
	.fb_main .fb_content .fb_tool button {
	  width: 90rpx;
	  height: 90rpx;
	  margin: 10rpx;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  padding: 10rpx;
	}
	.fb_main .fb_content .fb_tool .up_img_item {
	  margin: 10rpx;
	}
	.fb_main .form_btn_wrap {
	  display: flex;
	  justify-content: flex-end;
	}
	.fb_main .form_btn_wrap button {
	  margin: 0;
	  padding: 8rpx 15rpx;
	  width: 30%;
	  height: 90rpx;
	  line-height: 80rpx;
	  font-size: 32rpx;
	  color: aliceblue;
	  background-color:  #f4ea2a;
	}

</style>
